<template>
  <div class="replyComment-container">
    <div class="replyComment-top">
      <el-link
        type="info"
        @click="GoReplyCommentDetail"
        :underline="false"
        class="title"
        >{{ replyComment.reply_content }}</el-link
      >
      <span class="create_time">{{
        replyComment.create_time | formatDate
      }}</span>
    </div>

    <div class="replyComment-bottom">
      <div class="info-list">
        <span class="view">回复人: {{ replyComment.commenter_name }}</span>
        <span class="view">被回复人: {{ replyComment.to_commenter_name }}</span>
      </div>
      <div class="options">
        <el-button class="CustomBtn" @click="deleteReplyComment"
          >删除</el-button
        >
      </div>
      <div></div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    replyComment: {
      type: Object,
      required: true
    }
  },
  components: {},
  data() {
    return {
      currentReplyComment: {}
    }
  },
  computed: {},
  watch: {
    // 更换props参数到data
    replyComment: {
      immediate: true,
      deep: true,
      handler(val, oldval) {
        this.currentReplyComment = val
        if (val) {
          this.getReplyCommentOrigin()
        }
      }
    }
  },
  created() {},
  mounted() {
    // 获取来源
    // this.getReplyCommentOrigin()
  },
  methods: {
    // 关闭对话框事件
    handleDialogClosed() {
      this.ShowDialogVisible = false
    },
    // 浏览功能
    GoReplyCommentDetail() {
      switch (this.currentReplyComment.origin.type) {
        case 'Article':
          this.$router.push({
            name: 'ArticleDetail',
            params: { id: this.currentReplyComment.origin.info.id }
          })
          break
        case 'MusicScore':
          this.$router.push({
            name: 'MusicScoreDetail',
            params: { id: this.currentReplyComment.origin.info.id }
          })
          break
        case 'Video':
          this.$router.push({
            name: 'VideoDetail',
            params: { id: this.currentReplyComment.origin.info.id }
          })
          break
        case 'Document':
          this.$bus.$emit(
            'ShowDocumentReplyCommentDialog',
            this.currentReplyComment
          )
          break
      }
    },
    // 删除功能
    deleteReplyComment() {
      let formData = new FormData()
      formData.append('reply_id', this.replyComment.id)
      this.$confirm('此操作将永久删除该文章, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const res = await this.$API.user.deleteReplyComment(formData)
          console.log(res)
          if ((res.status = 200)) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            // 发送事件
            this.$bus.$emit('DeleteReplyCommentSuccess')
          } else {
            this.message.error(res.msg)
          }
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    handleCommand(c) {
      // 子标签选择判断
      switch (c) {
        case 'delete':
          this.deleteReplyComment()
          break
      }
    },
    async getReplyCommentOrigin() {
      console.log('current', this.currentReplyComment)
      const res = await this.$API.user.getReplyCommentOrigin(
        this.currentReplyComment.id
      )
      console.log(res)
      if (res.status == 200) {
        this.currentReplyComment.origin = res.data
      }
    }
  }
}
</script>

<style scoped>
.replyComment-container {
  line-height: 2em;
}
.replyComment-top {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.title {
  font-size: 16px;
  color: #55596b;
}
.create_time {
  color: #9f9f9c;
}
.replyComment-center {
  width: 100%;
  color: #9fa2af;
}
.replyComment-bottom {
  width: 100%;
  display: flex;
  flex-direction: space-between;
}

.info-list {
  width: 50%;
  color: #999aad;
}
.info-list span {
  margin-right: 10px;
}
.options {
  width: 50%;
  display: flex;
  justify-content: right;
}
.options * {
  margin-left: 10px;
}
</style>
